<template>
  <div class="page fxActivityRecord-list">
    <messageComfirm @leftCallBack="cancel" @rightCallBack="sure" :visible="modalVisible">
      <div class="send-email">
        <div class="title">邮箱地址</div>
        <input type="email" v-model="email" placeholder="@" />
      </div>
    </messageComfirm>
    <fxActivityRecordFilterItem
      ref="fxActivityRecordFilterItem"
      @filterChoice="handleFilterChoice"
      :defaultStartDate="defaultStartDate"
      :defaultEndDate="defaultEndDate"
      :pageType="pageType"
      :roleInfo="roleInfo"

    ></fxActivityRecordFilterItem>
    <fxActivityRecordDetails
      ref="fxActivityRecordDetails"
      :param="detailsData"
      :title="headerTitle"
    ></fxActivityRecordDetails>
    <div class="scroll-view">
      <customHeader
        :middleTitle="headerTitle"
        @leftCallBack="goBack"
        @rightCallBack="handleClickFilter"
      >
        <div>
          <i
            class="filter-icon zhk-nav_filter"
            :class="{blue:searchParam.shopId||(filterData.payType&&filterData.payType.length)||(filterData.settlementType&&filterData.settlementType.length)}"
          ></i>
        </div>
      </customHeader>

      <searchBar @search="searchCallbck" placeholder="订单编号／第三方交易流水号" />
      <div class="filter-result">{{startTime}} 至 {{endTime}}</div>
      <div class="total-data">
        <i class="zhk-jsq"></i>
        <span>合计¥{{numberFormate(summary.totalAmount)}}=收入¥{{numberFormate(summary.receiveAmount)}}-退款¥{{numberFormate(summary.refundAmount)}}</span>
      </div>
      <div class="page-body">
        <div class="section" ref="wrapper" :style="{ height:'100%' }">
          <no-data msg="暂无数据" v-if="list.length==0"></no-data>
          <ul
            class="list"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="30"
          >
            <li v-for="(item,index) in list" :key="index" @click="linkToDetail(item)">
              <div class="left">
                <div class="left-icon">
                  <img v-if="item.payType == 1" :src="tradeXJ" alt />
                  <img v-if="item.payType == 2" :src="tradeZFB" alt />
                  <img v-if="item.payType == 3" :src="tradeHYK" alt />
                  <img v-if="item.payType == 4" :src="tradeYL" alt />
                  <img v-if="item.payType == 5" :src="tradeWX" alt />
                  <img v-if="item.payType == 6" :src="tradeERP" alt />
                </div>
                <div class="order-type" v-if="item.orderType&&(item.orderType==7||item.orderType==9)">{{item.orderType==7?"营销费":"软件费"}}</div>
              </div>

              <div class="right-data">
                <p>
                  <span class="shop-name">{{item.shopName}}</span>
                  <span class="data-flow">¥ {{item.amount}}</span>
                </p>
                <p>
                  <span class="data-time">{{tradeTimeFormate(item.recordTime)}}</span>
                  <span class="data-status">{{item.recordType===1?"收款":"退款"}}</span>
                </p>
                <p class="info" v-if="item.recordType===1">第三方交易流水号:{{item.thirdTradeNo}}</p>

              </div>
            </li>
          </ul>
          <p v-show="loading" class="page-infinite-loading">
            <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
          </p>
          <div v-show="noMore&&!loading&&role!==''&&list.length!==0" class="no-more">
            <span>已经全部加载完毕</span>
          </div>
        </div>
      </div>
      <div class="btn" @click="sendEmail">记录详情发送至邮箱</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import searchBar from "../../components/searchBar/searchBar";
import messageComfirm from "../../components/messageComfirm/messageComfirm";
import fxActivityRecordDetails from "../fxActivityRecord/details";
import jsBridge from "../../tools/jsBridge.js";
import { Search, Toast, MessageBox } from "mint-ui";
import noData from "../../components/noData/noData";
import fxActivityRecordFilterItem from "./fxActivityRecordFilterItem";
import moment from "moment";
export default {
  name: "fxActivityRecordList",
  data() {
    return {
      email: "",
      modalVisible: false,
      pageType: 1,
      dateFomate: "YYYY-MM-DD HH:mm",
      loading: false,
      noMore: false,
      detailsData: null,
      list: [],
      summary: {},
      role: "",
      roleInfo: {},
      selfShopId: "",
      tradeZFB: "./static/images/trade/zfbzf.png",
      tradeWX: "./static/images/trade/wxzf.png",
      tradeYL: "./static/images/trade/ylzf.png",
      tradeXJ: "./static/images/trade/xjzf.png",
      tradeHYK: "./static/images/trade/hykzf.png",
      filterData: {
        startDate: this.defaultStartDate,
        endDate: this.defaultEndDate,
        payType: null,
        store: null,
        settlementType: null,
        orderType: null,
      },
      params: {},
      pageSize: 10,
      currentPage: 1,
      searchParam: {
        shopName: "",
        shopId: "",
        id: ""
      }
    };
  },
  methods: {
    //千分位分隔符并保留两位小数
    numberFormate(v) {
      if (v !== undefined && v !== null && v !== "" && typeof v === "number") {
        return CommonUtil.milliFormat(v, 2);
      } else {
        return "0.00";
      }
    },
    searchCallbck(v) {
      this.searchParam.id = v;
      if (!this.loading) {
        this.loadData(1);
      }
    },
    linkToDetail(item) {
      this.detailsData = item;
      this.$refs.fxActivityRecordDetails.popupShow();
    },
    tradeTimeFormate(tradeTime) {
      return CommonUtil.timestampToTime(tradeTime);
    },
    //打开筛选
    handleClickFilter() {
      this.$refs.fxActivityRecordFilterItem.popupShow();
    },
    //筛选确定
    handleFilterChoice(v) {
      const store = this.filterData.store;
      this.filterData = v;
      if (v.store.length === 0) {
        this.filterData.store = store;
      } else {
        if (v.store[0].selectKey !== "all") {
          this.searchParam.shopId = v.store[0].selectKey;
          this.searchParam.shopName = v.store[0].selectName;
        } else {
          this.searchParam.shopId = null;
          this.searchParam.shopName = v.store[0].selectName;
        }
      }
      this.filterData.startDate = v.startDate
        ? v.startDate
        : this.defaultStartDate;
      this.filterData.endDate = v.endDate ? v.endDate : this.defaultEndDate;
      this.filterData.payType = v.payTypeList.map(item => {
        return Number(item.value);
      });
      this.filterData.settlementType =
        v.settlementTypeList.length > 0 ? v.settlementTypeList[0].value : null;

      if (v.orderTypeList.length === 0) {
        this.filterData.orderType= this.pageType;
      } else {
        this.filterData.orderType = v.orderTypeList.map(item => {
          return Number(item.value);
        });
      }
      this.loadData(1);
    },
    goBack() {
      if (this.$refs.fxActivityRecordDetails.popupVisible) {
        this.$refs.fxActivityRecordDetails.popupHide();
      } else if (this.$refs.fxActivityRecordFilterItem.popupVisible) {
        this.$refs.fxActivityRecordFilterItem.back();
      } else {
        if (this.$route.query.close == "true") {
          jsBridge.closeWindow();
        } else {
          this.$router.back();
        }
      }
    },
    loadSum(param) {
      this.ajax({
        url: "/newapp/marketing/record/queryMarketingRecordSum.do",
        type: "post",
        controlLoading: false,
        data: param
      })
        .then(res => {
          if (res.success) {
            this.summary = res.resultObject;

          } else {
            Toast(res.msg);
          }
        })
        .catch(err => {

        });
    },
    loadData(page) {
      this.loading = true;
      let param = {};
      param.pageSize = this.pageSize;
      if (page) {
        this.currentPage = page;
        param.currentPage = page;
      } else {
        param.currentPage = this.currentPage;
      }

      param.shopId =
        this.roleInfo.manyShopFlag? this.searchParam.shopId:this.selfShopId;
      if (this.roleInfo.manyShopFlag && param.shopId == "all") {
        param.shopId = null;
      }
      if (param.currentPage == 1) {
        this.list = [];
      }
      param.startTime = this.filterData.startDate || null;
      param.endTime = this.filterData.endDate || null;
      param.settlementType = this.filterData.settlementType;
      param.orderTypeList = this.filterData.orderType;
      param.searchKey =
        this.searchParam.id && this.searchParam.id.length > 0
          ? this.searchParam.id
          : null;
      param.payType =
        this.filterData.payType && this.filterData.payType.length > 0
          ? this.filterData.payType[0]
          : null;
      this.ajax({
        url: "/newapp/marketing/record/queryMarketingRecordList.do",
        type: "post",
        controlLoading: false,
        data: param
      })
        .then(res => {
          this.loading = false;
          this.noMore = false;
          if (res.success) {
            this.params = param;
            if (param.currentPage === 1) {
              this.loadSum(param);
            }
            var data = res.resultObject;
            //最后一页将noMore设置为true
            if (data != null && data.dataList && data.dataList.length > 0) {
              this.list = this.list.concat(data.dataList);
              this.noMore = Math.ceil(data.dataAllCount / this.pageSize) === this.currentPage ? true : false;
            } else {
              this.noMore = true;
            }
            this.currentPage = this.currentPage + 1;
          } else {
            this.noMore = true;
            Toast(res.msg);
          }
        })
        .catch(err => {
          this.loading = false;
          this.noMore = true;
        });
    },
    //无限加载
    loadMore() {
      if (this.loading || this.noMore || !this.role) {
        return;
      }
      this.loadData();
    },
    //打开发送邮箱弹窗
    sendEmail() {
      if (!this.list.length) {
        Toast("当前条件下无记录数据，请更换条件查询");
        return;
      }
      this.modalVisible = true;
    },
    //关闭邮箱弹窗
    cancel() {
      this.modalVisible = false;
    },
    //邮箱发送确定
    sure() {
      if (!this.email) {
        Toast("邮箱地址不能为空");
        return;
      }
      const reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      if (!reg.test(this.email)) {
        Toast("邮箱地址格式有误，请重新输入");
        return;
      }
      this.params.email = this.email;
      //对账单发送邮箱
      this.ajax({
        url: "/newapp/marketing/record/sendEmailForMarketingRecord.do",
        type: "post",
        data: this.params
      })
        .then((res) => {
          if (res.success) {
            this.email = "";
            this.$router.push({
              path: "/accountStatement/sendSuccess",
              query: { email: this.email, msg: "记录详情将在3-5分钟之后发送成功", title: "已发送", header: this.headerTitle }
            });
          }
        })
        .catch((err) => {
          
        });
      this.modalVisible = false;

    },
  },
  created() {
    this.pageType = this.$route.query.type.split(",").map((v)=>{return Number(v)});
    this.filterData.orderType = this.pageType;
    this.filterData.startDate = moment(this.defaultStartDate).valueOf();
    this.filterData.endDate = moment(this.defaultEndDate).valueOf();
    CommonUtil.getUserInfo().then(userInfo => {
      this.role = userInfo.role;
      this.roleInfo = userInfo;
      this.selfShopId = userInfo.yzShopId;
      this.loadData(1);
    });
  },
  computed: {
    defaultStartDate() {
      return new Date(new Date(window.DateUtil.getDateFormat2(new Date())));
    },
    defaultEndDate() {
      return new Date();
    },

    startTime() {
      return moment(this.filterData.startDate).format(this.dateFomate);
    },

    endTime() {
      return moment(this.filterData.endDate).format(this.dateFomate);
    },
    headerTitle() {
      let title = "";
      const pageType =JSON.stringify(this.pageType);
      if (pageType == "[3]") {
        title = "津贴收款记录";
      } else if (pageType == "[8]") {
        title = "津贴发放记录";
      } else if (pageType =="[7,9]") {
        title = "服务费支出记录";
      }
      return title;
    }
  },
  components: {
    customHeader,
    noData,
    searchBar,
    fxActivityRecordFilterItem,
    messageComfirm,
    fxActivityRecordDetails
  }
};
</script>
<style lang='scss' scoped>
@import "fxActivityRecord";
</style>
